<template>
  <div class="legend-row">
    <div class="row" style="margin-right: 10px"><span>雷达反射率:</span></div>
    <div v-for="(item,index) in legendFsl" :key="index" class="cel">
      <div class="rec" :style="{background: item.color}" />
      <div class="val">{{ item.val }}</div>
    </div>
  </div>
</template>

<script>
export default {
    name: 'RainMeasured',
    data() {
        return {
            legendFsl: [
                { val: -32, color: 'rgb(99, 99, 99)' },
                { val: -5, color: 'rgb(0, 172, 164)' },
                { val: 0, color: 'rgb(192, 192, 254)' },
                { val: 5, color: 'rgb(122, 114, 238)' },
                { val: 10, color: 'rgb(30, 38, 208)' },
                { val: 15, color: 'rgb(166, 252, 168)' },
                { val: 20, color: 'rgb(0, 234, 0)' },
                { val: 25, color: 'rgb(16, 146, 26)' },
                { val: 30, color: 'rgb(252, 244, 100)' },
                { val: 35, color: 'rgb(200, 200, 2)' },
                { val: 40, color: 'rgb(140, 140, 0)' },
                { val: 45, color: 'rgb(254, 172, 172)' },
                { val: 50, color: 'rgb(254, 100, 92)' },
                { val: 55, color: 'rgb(238, 2, 48)' },
                { val: 60, color: 'rgb(212, 142, 254)' },
                { val: 65, color: 'rgb(170, 36, 250)' }
            ]
        }
    }
}
</script>

<style scoped lang="less">
  @import "./legend";
  .cel{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    white-space:nowrap;
    .rec{
      width: 28px;
      height: 16px;
      border-radius: 0;
    }
    .val{
      width: 28px;
      margin-left: -14px;
      text-align: center;
      font-size: 14px;
    }
  }
</style>
